import { getQuestionnaireList } from '@/api';
import { questionnaireStatusOptions } from '@/common';
import TableSearch from '@/components/TableSearch';
import { Button, Card, DatePicker, Form, Input, Modal, Radio, Select, Table,ProTable } from '@aurum/pfe-ui';
import { usePagination } from 'ahooks';
import { useCallback, useEffect, useMemo, useState } from 'react';

import React from 'react';
import { statusTextMap } from './constants';
import StatusTag from '@/components/StatusTag';

const statusOptions = [
  { value: 'draft', label: '草稿' },
  { value: 'pending', label: '待发布' },
  { value: 'active', label: '进行中' },
  { value: 'ended', label: '已结束' }
];

export default () => {
  const actionRef = React.useRef();
  
  // 列定义
  const columns = [
    {
      title: '任务名称',
      dataIndex: 'name',
      search: true,
      renderFormItem: () => <Input placeholder="输入任务名称" />
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status) => <StatusTag status={status} />,
      renderFormItem: () => (
        <Select options={statusOptions} placeholder="选择状态" />
      )
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      valueType: 'dateTime',
      hideInSearch: true
    },
    {
      title: '操作',
      width: 200,
      render: (_, record) => (
        <Space>
          <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
          <Button 
            danger 
            type="link" 
            disabled={!record.allowDelete}
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      )
    }
  ];

  return (
    <ProTable
      actionRef={actionRef}
      columns={columns}
      request={async (params) => {
        const { data } = await fetchTaskList(params);
        return {
          data: data.list,
          success: true,
          total: data.total
        };
      }}
      toolBarRender={() => [
        <Button key="create" type="primary" onClick={handleCreate}>
          新建任务
        </Button>
      ]}
      search={{
        filterType: 'light',
        span: 6
      }}
    />
  );
};
